<template>
  <div class="assess-page">
    <div class="assess-query">
      <el-form :model="form" label-width="80px" style="padding-top: 1%;">
        <el-form-item label="行政区 :" class="el-col el-col-6">
          <el-input v-model="form.aa"></el-input>
          <!-- <el-cascader :options="options" :props="{ multiple: true, checkStrictly: true }" clearable placeholder="请选择行政区"></el-cascader> -->
        </el-form-item>
        <el-form-item label="监测时间 :" class="el-col el-col-6 el-col-offset-1">
          <el-date-picker v-model="form.value1" type="datetime" placeholder="选择日期时间" style="width:100%"> </el-date-picker>
        </el-form-item>
        <el-form-item label="指标分类 :" class="el-col el-col-6 el-col-offset-1">
          <el-input v-model="form.aa"></el-input>
        </el-form-item>
        <el-form-item class="el-col el-col-4">
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="assess-view">
      <div>
        <img src="../../assets/image/指标总数.png" width="30px" style="margin-right:10px">
        指标总数
      </div>
      <div>
        <img src="../../assets/image/指标总数.png" width="30px" style="margin-right:10px">
        指标完整度
      </div>
      <div>
        <img src="../../assets/image/指标总数.png" width="30px" style="margin-right:10px">
        临界指标
      </div>
      <div>
        <img src="../../assets/image/指标总数.png" width="30px" style="margin-right:10px">
        突破指标
      </div>
    </div>
    <div class="assess-table">
      <div style="font-size: 18px;font-weight: bold;margin-left: 10px;">指标完成预警情况</div>
      <el-divider></el-divider>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="date" label="指标名称" align="center"></el-table-column>
        <el-table-column prop="name" label="预警等级" align="center"> </el-table-column>
        <el-table-column prop="address" label="检测值" align="center"></el-table-column>
        <el-table-column prop="name" label="规划值" align="center"> </el-table-column>
        <el-table-column prop="name" label="单位" align="center"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        aa: '',
        value1: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    getTableData () {

    },
    reset () {

    }
  },
}
</script>

<style lang="less" scoped>
.assess-page {
  height: 100%;
  width: 100%;
  background-color: #fff;
  .assess-query {
    height: 10%;
    margin: 0 15px;
  }
  .assess-view {
    height: 13%;
    display: flex;
    justify-content: space-around;
    align-content: center;
    background-color: #f7f7f7;
    margin: 0 15px;
    & > div {
      width: 20%;
      border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .assess-table {
    margin-top: 1%;
    height: 75%;
    margin: 0 15px;
  }
}
</style>
